<template>
  <div style="padding: 10px; width: 100%">
    <div style="margin: 10px 0; display: flex">
      <el-card
          class="card"
          v-for="item in gradeInfo"
          :body-style="{ display: 'flex', padding: 0 }"
          :key="item.name"
      >
        <div class="test">
          <!-- <i class="el-icon-medal"></i> -->
          <svg class="el-icon-medal">
            <use xlink:href="#icon-guanjunjiangbei"></use>
          </svg>
        </div>
        <div style="margin-left: 20px; width: 100%">
          <p class="name">{{ item.name }}</p>
          <p class="count">{{ item.count }}人</p>
        </div>
      </el-card>
    </div>
    <div class="div-header">
      <el-card class="card-header">
        <div id="myChart" :style="{ width: '500px', height: '400px' }"></div>
      </el-card>
    </div>
    <div class="div-header2">
      <el-card class="card-header2">
        <div id="myChart1" :style="{ width: '500px', height: '400px' }"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  name: "Index",
  data() {
    return {
      gradeInfo: [],
      hartInstance: null,
      allData: null,
    };
  },
  mounted() {
    this.drawLine();
    this.initChart();
    this.getData();
  },
  methods: {
    // 初始化echarts对象
    initChart() {
      this.chartInstance = this.$root.echarts.init(
          document.getElementById("myChart1")
      );
    },
    // 获取数据
    getData() {
      request
          .get("/exam/count", {})
          .then((res) => {
            console.log("数据");
            console.log(res.data);
            this.allData = res.data;
            this.updateChart();
          });
    },
    // 更新图表
    updateChart() {
      const name = this.allData.map((item) => {
        return item.name;
      });
      const value = this.allData.map((item) => {
        return item.count;
      });
      const option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: "各年级考试情况",
        },

        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: name,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "考试次数",
            type: "bar",
            barWidth: 66,
            data: value,
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$root.echarts.init(document.getElementById("myChart"));
      let option = {
        title: {
          text: "年级学生占比",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      request.get("/student/count").then((res) => {
        console.log(res);
        this.gradeInfo = res.data;
        res.data.forEach((item) => {
          option.series[0].data.push({name: item.name, value: item.count});
        });
        myChart.setOption(option);
      });
    },
  },
};
</script>

<style scoped>
.test {
  margin-left: 10px;
  width: 80px;
  height: 80px;
  font-size: 30px;
  display: table;
  text-align: center;
}

.card {
  width: 300px;
  height: 80px;
  margin-left: 15px;
}

.el-icon-medal {
  width: 80px;
  height: 80px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.name {
  margin-top: 10px;
  color: rgb(53, 52, 121);
  font-weight: bold;
  font-size: 20px;
  font-family: "华文彩云";
}

.count {
  color: #999;
  margin-top: 10px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  font-family: "华文彩云";
}

.div-header {
  margin-left: 15px;
  width: 400px;
  /* display: flex; */
  float: left;
}

.div-header2 {
  width: 400px;
  /* display: flex; */
  float: right;
  margin-right: 15px;
}

.card-header {
  margin-top: 20px;
  width: 500px;
  height: 400px;
  /* justify-content: space-between;
  align-items: center; */
  float: left;
}

.card-header2 {
  margin-top: 20px;
  width: 500px;
  height: 400px;
  float: right;
}
</style>
 